<template>
  <div class="dialog-design-wrap">
    <div class="title">{{ element.options.name }}</div>

    <div class="container">
      <low-parse
        v-if="storeJson"
        :key="parseKey"
        :store="storeJson"
        ref="parse"
        @storeInit="storeInit"
      ></low-parse>
    </div>


    <div class="handles-wrap">
      <el-button
        v-for="(handle, index) in element.handles"
        :key="index"
        :type="handle.type"
        @click="handleClick(handle.eventCode)"
      >
        {{ handle.name }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { Store } from "@/low-code/utils/store.js";
export default {
  props: ["element", "data", "index"],
  data() {
    return {
      parseKey: 0,
      storeJson: "",
    };
  },
  methods: {
    storeInit(store){
      console.log('storeInit',store)
       this.store.dialogController.currentDialogStore=store
    },
    handleClick(eventCode) {
      let _this=this
      eventCode &&
        this.store.eventCenter
          .fire(eventCode, {
            triggerSource: _this.element,
            dialog:this.store.dialogController.getDialog()
          })
          .then((res) => {
            if (res) {
               _this.element.options.dialogVisible = false;
            }
          });
    },
  },
  watch: {
    "element.options.defaultValue": {
      handler(formId) {
        //特别注意，不能用箭头函数，箭头函数，this指向全局
        console.log("formId", formId);
        formId &&
          Store.axios({
            method: "get",
            url: Store.prefixUrl + "/editorFormTemplate",
            params: {
              id: formId,
            },
          }).then((result) => {
            this.storeJson = JSON.parse(result.data.data.formTemplate);
            this.parseKey++;
          });
      },
      immediate: true, //刷新加载 立马触发一次handler
    },
  },
  computed: {
    store() {
      return this.element.getRoot();
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-design-wrap {
  margin: 20px;
  min-height: 250px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

  .title {
    line-height: 60px;
    padding-left: 20px;
  }

  .list-wrap {
    padding: 20px;
    min-height: 250px;
  }
}
.container {
  padding: 20px;
}
.handles-wrap {
  line-height: 45px;
  text-align: right;
  padding-bottom: 15px;
  padding-right: 10px;
}
</style>